@import "variables.styl"

//按钮未选中
.button-unselected
  background:linear-gradient(0deg,#eee,#fff);
  border:1px solid rgb(219, 211, 211);
  box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius 3px
  color $color-theme-dark !important 
//
.button-selected
  background:linear-gradient(0deg,#b42020,#e02828) !important 
  border:1px solid rgba(184, 33, 33, 1);
  box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius:3px;
  color: #fff !important 

.button-disabled 
  box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.1)
  border:1px solid $color-divide-line
  background: $color-text-button
  border-radius:3px;
  color: #cccdd0

// 选号球未选中
.ball-unselected
  background:linear-gradient(0deg,rgba(238,238,238,1),rgba(255,255,255,1));
  border:1px solid rgba(219, 211, 211, 1);
  box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
// 选号球选中
.ball-selected
  box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.2);
  background:linear-gradient(180deg,#f74646,rgba(224, 40, 40, 0.9));
  border:2px solid rgba(224, 40, 40, 1);
  box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.2);
  color #fff
  // 选号框
.number-box-select-blue
  border-style: solid;
  border-width: 1px;
  border-color: rgb(0, 154, 224);
  background: rgba(0, 154, 224, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);

.number-box-select-green
  border: 1px solid rgb(66, 153, 0);
  border-color: rgb(66, 153, 0)
  background: rgba(66, 153, 0, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.number-box-select-grey
  border-style: solid;
  border-width: 1px;
  border-color: rgb(140, 143, 152);
  background-color: rgba(140, 143, 152, 0.102);

.number-box-select-red
  border-style: solid;
  border-width: 1px;
  border-color: rgb(224, 40, 40);
  background: rgba(224, 40, 40, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1)

.input-style
  border-style: solid;
  border-width: 1px;
  border-color: rgb(219, 211, 211);
  background-color: #f0f0f0;
  box-shadow: inset 0.776px 2.898px 6px 0px rgba(0, 0, 0, 0.2)

// icon背景
.icon-bg
  background-image: -moz-linear-gradient( 90deg, rgb(250,217,177) 0%, rgb(254,250,224) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(250,217,177) 0%, rgb(254,250,224) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(250,217,177) 0%, rgb(254,250,224) 100%);

.box-shadow
  background-color: rgba(255, 255, 255, 0);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);


// 赛车彩票选中的颜色 

.box-selected-p1 
  border: 1px solid $color-p1;
  background: rgba($color-p1, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p10 
  border: 1px solid $color-p10;
  background: rgba($color-p10, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p2 
  border: 1px solid $color-p2;
  background: rgba($color-p2, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p3 
  border: 1px solid $color-p3;
  background: rgba($color-p3, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p4 
  border: 1px solid $color-p4;
  background: rgba($color-p4, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p5 
  border: 1px solid $color-p5;
  background: rgba($color-p5, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p6 
  border: 1px solid $color-p6;
  background: rgba($color-p6, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p7 
  border: 1px solid $color-p7;
  background: rgba($color-p7, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p8 
  border: 1px solid $color-p8;
  background: rgba($color-p8, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box

.box-selected-p9
  border: 1px solid $color-p9;
  background: rgba($color-p9, 0.102);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box


// 北京赛车彩票球颜色
.jssc-ball-1 
  color #fff 
  background linear-gradient(180deg, #ffec00, $color-p1)
  border 2px solid rgba($color-p1, 0.9)
  // box-sizing border-box 

.jssc-ball-2 
  color #fff 
  background linear-gradient(180deg, #6ae4ff, $color-p2)
  border 2px solid rgba($color-p2, 0.9)
  // box-sizing border-box 

.jssc-ball-3 
  color #fff 
  background linear-gradient(180deg, #858585, $color-p3)
  border 2px solid rgba($color-p3, 0.9)
  // box-sizing border-box 

.jssc-ball-4 
  color #fff 
  background linear-gradient(180deg, #ffc300, $color-p4)
  border 2px solid rgba($color-p4, 0.9)
  // box-sizing border-box 

.jssc-ball-5 
  color #fff 
  background linear-gradient(180deg, #00eff3, $color-p5)
  border 2px solid rgba($color-p5, 0.9)
  // box-sizing border-box 

.jssc-ball-6
  color #fff 
  background linear-gradient(180deg, #913bff, $color-p6)
  border 2px solid rgba($color-p6, 0.9)
  // box-sizing border-box 

.jssc-ball-7
  color #fff 
  background linear-gradient(180deg, #eaeaea, $color-p7) 
  border 2px solid rgba($color-p7, 0.9)
  // box-sizing border-box 

.jssc-ball-8 
  color #fff 
  background linear-gradient(180deg, #f34343, $color-p8)
  border 2px solid rgba($color-p8, 0.9)
  // box-sizing border-box 

.jssc-ball-9 
  color #fff 
  background linear-gradient(180deg, #b72424 , $color-p9)
  border 2px solid rgba($color-p9, 0.9)
  // box-sizing border-box 

.jssc-ball-10 
  color #fff 
  background linear-gradient(180deg, #00e97a, $color-p10) 
  border 2px solid rgba($color-p10, 0.9)
  // box-sizing border-box  

//蛋蛋/28
// 灰色
.dd-ball-0, .dd-ball-13, .dd-ball-14, .dd-ball-27
  color #fff 
  background linear-gradient(180deg, #eaeaea, $color-ball-grey) 
  border 2px solid rgba($color-ball-grey, 0.9)

// 绿色
.dd-ball-1, .dd-ball-4, .dd-ball-7, .dd-ball-10, .dd-ball-16, .dd-ball-19, .dd-ball-22, .dd-ball-25
  color #fff 
  background linear-gradient(180deg, #6be20b, $color-ball-green) 
  border 2px solid rgba($color-ball-green, 0.9)
  // box-sizing border-box  

// 蓝色
.dd-ball-2, .dd-ball-5, .dd-ball-8, .dd-ball-11, .dd-ball-17, .dd-ball-20, .dd-ball-23, .dd-ball-26
  color #fff 
  background linear-gradient(180deg, #00e7f8, $color-ball-blue) 
  border 2px solid rgba($color-ball-blue, 0.9)
  // box-sizing border-box 

// 红色
.dd-ball-3, .dd-ball-6, .dd-ball-9, .dd-ball-12, .dd-ball-15, .dd-ball-18, .dd-ball-21, .dd-ball-24
  color #fff 
  background linear-gradient(180deg, #f74646, $color-ball-red) 
  border 2px solid rgba($color-ball-red, 0.9)
  // box-sizing border-box 


// 蛋蛋color
.dd-color-0, .dd-color-13, .dd-color-14, .dd-color-27
  color $color-ball-grey
.dd-color-1, .dd-color-4, .dd-color-7, .dd-color-10, .dd-color-16, .dd-color-19, .dd-color-22, .dd-color-25
  color $color-ball-green
.dd-color-2, .dd-color-5, .dd-color-8, .dd-color-11, .dd-color-17, .dd-color-20, .dd-color-23, .dd-color-26
  color $color-ball-blue
.dd-color-3, .dd-color-6, .dd-color-9, .dd-color-12, .dd-color-15, .dd-color-18, .dd-color-21, .dd-color-24
  color $color-ball-red 


// 刷新旋转
.rotate 
  animation:rotating 1.2s linear infinite

@keyframes rotating{
  from {transform:rotate(0)}
  to {transform:rotate(360deg)}
}

// 重要新闻高亮
.highlight-news-event 
  font-size 12px 
  color #fff !important 
  box-sizing border-box 
  padding 2px 3px 
  background-color $color-highlight-yellow
  position relative 
  &:before 
    content ''
    display block 
    position absolute
    left -6px
    bottom 0 
    width 0
    height 0
    border-left 6px solid  $color-highlight-yellow
    border-bottom 3px solid $color-highlight-yellow
    border-color transparent transparent $color-highlight-yellow transparent  

// hover-style 
.hover-style 
  cursor pointer
// count-down time 
.time-countdown 
  font-size 24px
  font-family LEDFont
  font-weight bold 
  color $color-theme-red 
  
// input-style 
.input-style 
  border:1px solid rgba(219, 211, 211, 1)
  box-shadow 0px 0px 3px rgba(0, 0, 0, 0.2) inset
  border-radius 4px
  background #f4f4f4
  outline-style none

// 波浪

.wave-style 
  position absolute 
  &:before 
    content: '';
    position: absolute;
    height: 6px;
    width: 100%;
    left:0 ; right: 0;
    bottom: 0px;
    transform: rotate(180deg);
    background-image: radial-gradient(circle, #ddd, 6px, transparent 6px);
    background-size: 12px 12px;
    background-position: 0 6px


.member-count 
  color: $color-theme-red
  border-radius: 3px
  box-sizing: border-box;
  padding: 0 3px
  border: 1px solid $color-theme-red 
  font-size 12px 
  background: rgba($color-theme-red, 0.102)

.layer-style 
  position fixed 
  top 0 
  left 0
  right 0
  bottom 0
  z-index 100000 
  background:linear-gradient(180deg, #e5e5e5, #fefbfb)

// .lottery-bg 
//   background-image: url(../imgs/caizhong_bj_01.svg)

.box-shadow-lottery 
  box-shadow 0px 1px 3px 3px #ddd